<html>
<head>
    <meta charset="utf-8">
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css" media="all">
    <script src="${base}/frame/layui/layui.all.js" charset="utf-8"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <script src="${base}/backstage/js/feng.js"></script>
    <script type="text/javascript" src="${base}/frame/echarts/echarts.min.js"></script>
    <style>
        .layui-bg-blu{
            color: #2c2c2c;
            background-color: #FFFFFF;
            border:2px solid #2c2c2c;
            border-radius:10px;
            width: 240px;
            height: 120px;
            font-size: 30px;


        }
        .layui-bg-blu:hover{
            color: #ffffff;
            font-size: 35px;
        }
        form{
            padding:20px;
        }
        .layui-btn-radius{
            border-radius: 5px;
        }
        .layui-btn-radius{
            border-radius: 5px;
        }
        .wh1{
            width: 50px;
            height: 20px;
            border-radius: 3px;
            background-color:#0c9076;
        }
        #wh3{
            width: 50px;
            height: 20px;
            border-radius: 3px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="site-demo-button" id="layerDemo" style="margin: 10px 10px 10px 10px">
    <button class="layui-btn layui-btn-radius" onclick="javascript:insertZhuo()" style="background-color: #0c9076; width: 150px;" data-method="offset" type="button">新增</button>
    <button class="layui-btn layui-btn-radius" onclick="javascript:deleteZhuo()" style="background-color: red; width: 150px;" data-method="offset" type="button">删除</button>
<#--    <fieldset class="layui-elem-field layui-field-title"></fieldset>-->
    <div id="checkS" style="margin-left: 20px">
        <div class="demoTable"style="float:right;margin-right: 30px">
            <span style="color:#666666;">
                无&nbsp;人:&nbsp;&nbsp;&nbsp;<div class="layui-inline"><div class="wh1"></div></div>
            &nbsp;&nbsp;&nbsp; 有&nbsp;人:&nbsp;&nbsp;&nbsp;<div class="layui-inline"><div id="wh3"></div></div>
            </span>
        </div>
        <br>

    </div>
</div>

<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top:10px;"></fieldset>
    <div style="border: 1px solid #c2c2c2;height: 100%">
        <div class="site-demo-button" id="layerDemo" style="margin: 10px;">
            <div class="layui-btn-container" id="zhuo">


            </div>
        </div>
    </div>
</div>

</body>

<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
    })
    
</script>
<script>
    $(function(){
        selectName();
    });
    //查询桌号
    function selectName() {
        $.ajax({
            type: "get",
            url: "${base}/tableNumber/selectName",
            data: {"userId":'${user.id}'},
            success: function (data) {
                if (data.code === 200) {
                    $("#zhuo").html("")
                    for (let i = 0; i < data.data.length; i++) {
                        if(data.data[i].state===1){
                            $("#zhuo").append(
                                '<button data-method="setTop" onclick="selectAlert(\''+data.data[i].id+'\')" style="background: #0c9076;" class="layui-btn layui-bg-blu">'+data.data[i].name+"号桌"+'</button>'
                            )
                        }else{
                            $("#zhuo").append(
                                '<button data-method="setTop" onclick="selectAlert(\''+data.data[i].id+'\')" style="background: red;" class="layui-btn layui-bg-blu">'+data.data[i].name+"号桌"+'</button>'
                            )
                        }

                    }
                }
            }
        });
    }

    //新增桌号
    function insertZhuo(){
        layer.open({
            type: 2 //此处以iframe举例
            ,area: ['480px', '200px']
            ,shade: 0
            ,offset: 'auto'
            ,shade: 0.5 //显示遮罩
            ,content: ['${base}/tableNumber/add.html','no']
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop( layero); //重点2
            }

        });
    }
    //删除桌号
    function selectAlert(id){
        layer.open({
            type: 2 //此处以iframe举例
            ,area: ['480px', '400px']
            ,shade: 0
            ,offset: 'auto'
            ,shade: 0.5 //显示遮罩
            ,content: ['${base}/tableNumber/alert.html?id='+id,'no']
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop( layero); //重点2
            }
        });
    }
    //弹框
    function deleteZhuo(){
        layer.open({
            type: 2 //此处以iframe举例
            ,area: ['480px', '400px']
            ,shade: 0
            ,offset: 'auto'
            ,shade: 0.5 //显示遮罩
            ,content: ['${base}/tableNumber/delete.html','no']
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop( layero); //重点2
            }
        });
    }
</script>
<script>
        // if ("WebSocket" in window) {
        //     ws = new WebSocket("ws://localhost:80/websocket/"+"admin");
        //     ws.onopen = function() {
        //         // alert("连接成功...");
        //     };
        //     //接收到消息的回调方法
        //     ws.onmessage = function (evt) {
        //         var msg = evt.data;
        //         if(msg==="refresh_index_order"){
        //             selectName();
        //         }
        //
        //     };
        //     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        //     window.onbeforeunload = function () {
        //         // alert("关闭窗口")
        //         ws.close();
        //     }
        //     //连接发生错误的回调方法
        //     ws.onerror = function () {
        //         alert("消息通道发生错误");
        //     };
        //     ws.onclose = function() {
        //         alert("连接已关闭...");
        //         ws.close();
        //     };
        // } else {
        //     // 浏览器不支持 WebSocket
        //     alert("您的浏览器不支持 WebSocket!");
        //
        // }




</script>


</html>


